//坐标系空间固定大小250 * 250 四周保留25留白，视觉效果200*200
//使用坐标系时，
//    文字大小按250*250设计
//    x和y轴文字位置，按250*250设计
//    图形描边粗细按照250*250设计
//    坐标轴内数据点的位置，需要先按比例放缩，再按照250*250设计
//    如：250高度，显示500高的数据 （比例是0.5）
//        现在有数据300，在坐标系中应该是在150位置
//alert("使用坐标系绘制组件，请先阅读使用说明");

// {id, xAxis=true, yAxis=true, color='#aaa'}
function draw(arg) {
  if (typeof arg === "string") {
    arg = { id: arg };
  }

  let config = {
    id: "",
    xAxis: true,
    yAxis: true,
    color: "#aaa",
    ...arg,
  };

  const NS = "http://www.w3.org/2000/svg";
  const svg = document.querySelector(config.id);
  svg.setAttribute("viewBox", "0 0 250 250");

  const g = document.createElementNS(NS, "g");
  //绘制横竖11条线
  let d = "";
  for (let i = 0; i <= 10; i++) {
    if (config.xAxis) {
      d += `M25 ${25 + i * 20}H225`;
    }
    if (config.yAxis) {
      d += `M${25 + i * 20} 25V225`;
    }
  }
  const path = document.createElementNS(NS, "path");
  path.setAttribute("d", d);
  path.setAttribute("fill", "none");
  path.setAttribute("stroke", config.color);
  path.setAttribute("stroke-width", "1");
  g.appendChild(path);

  const cs = svg.children;
  if (cs && cs.length > 0) {
    svg.insertBefore(g, cs[0]);
  } else {
    svg.appendChild(g);
  }
}
